<template>
  <div>
    <el-form ref="formRef" :model="form" class="mt6" size="large" :rules="rules">
      <el-form-item prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" @keyup.enter="onLogin"></el-input>
      </el-form-item>

      <el-form-item prop="imgCode" class="flex">
          <!-- <el-input v-model="form.imgCode" placeholder="图片验证码" style="width: 50%;"></el-input>
          <el-image :src="imgCodeUrl" class="flex-1" style="height: 40px;margin-left: 5px;" @click="getImgCodeFun"></el-image> -->
         <el-input v-model="form.imgCode" placeholder="图片验证码" style="flex: 1;"  @keyup.enter="onLogin"></el-input>
          <div class="img_box"  :style="{backgroundImage: `url(${imgCodeUrl})`}"  @click="getImgCodeFun"></div>
        </el-form-item>

      <el-form-item prop="smsCode" class="flex">
        <el-input v-model="form.smsCode" placeholder="手机验证码" style="width: 50%;" @keyup.enter="onLogin"></el-input>
        <el-button @click="sendPhoneCodeFun" :disabled="phoneCodeBtnDisabled" class="flex-1">{{ phoneCodeBtnText }}</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onLogin" class="w-full" :loading="loading">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElImage } from 'element-plus';
import { getImgCode,getSmsCode } from '@/api/auth';
const formRef = ref();
const loading = ref(false);
import { useUserStore,useRouteStore } from '@/store';
const userStore = useUserStore();
const routeStore = useRouteStore();

const form = ref({
  phone: '',
  smsCode: '',
  imgCode: ''
});
const imgCodeUrl = ref();
const rules = ref({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' }
  ],
  smsCode: [
    { required: true, message: '请输入手机验证码', trigger: 'blur' }
  ],
  imgCode: [
    { required: true, message: '请输入图片验证码', trigger: 'blur' }
  ]
});

const phoneCodeBtnText = ref('获取验证码');
const phoneCodeBtnDisabled = ref(false);
const sendPhoneCodeFun = () =>{
  if (form.value.phone && form.value.imgCode) {
    sendPhoneCode()
  } else {
    ElMessage.error('请填写手机号和图片验证码')
    return
  }
}
const sendPhoneCode = async () => {
  // 发送手机验证码的逻辑
  phoneCodeBtnDisabled.value = true;
  const data: any = await getSmsCode({phone:form.value.phone,imgCode:form.value.imgCode});//获取短信码
  if (data.code === 2000) {
    ElMessage.success('短信发送成功,请注意查收');
  }
  // 倒计时逻辑
  let countDown = 60;
  const timer = setInterval(() => {
    countDown--;
    phoneCodeBtnText.value = `${countDown}秒后重新发送`;
    if (countDown <= 0) {
      clearInterval(timer);
      phoneCodeBtnText.value = '获取验证码';
      phoneCodeBtnDisabled.value = false;
    }
  }, 1000);
};
const getImgCodeFun = async () => {
  const data: any = await getImgCode({});
  // console.log(data)
  imgCodeUrl.value = window.URL.createObjectURL(data);
};
// 验证码登录
const onLogin = async () => {
  await formRef.value?.validate();
  try {
    loading.value = true;
    await userStore.phoneLogin(form.value);
    routeStore.setUserInfo()
  } finally {
    loading.value = false;
  }
};
getImgCodeFun();//获取图片验证码
</script>
<style lang="scss" scoped>
  .img_box{
    width: 100px; 
    height:40px;
    margin-left: 5px;
    background-position: center center;
    background-size: 150%;
    background-repeat: no-repeat;
  }
</style>
